<template>
  <div>
    <!-- 搜索框 -->
    <el-form :inline="true" :model="employeeSearch" class="demo-form-inline">
      <el-form-item label="员工账号">
        <el-input v-model="employeeSearch.account" placeholder="员工账号" clearable />
      </el-form-item>

      <el-form-item label="员工昵称">
        <el-input v-model="employeeSearch.nickname" placeholder="员工昵称" clearable />
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="employeeSearch.telephone" placeholder="手机号" clearable />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="getEmployeePage()">搜索</el-button>
        <el-button @click="openDialog">添加员工</el-button>
      </el-form-item>
    </el-form>

     <el-divider />

    <!-- table表格 -->
    <el-table :data="employeeList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="account" label="账号"  />
      <el-table-column prop="nickname" label="昵称"  />
      <el-table-column prop="telephone" label="手机号" />
      <el-table-column prop="role" label="角色" />
      <el-table-column prop="is_del" label="状态" >
        <template #default="scope">
          {{scope.row.is_del == 0 ? '正常' : '禁用'}}
        </template>
      </el-table-column>
      <el-table-column  label="操作" >
        <template #default="scope">
          <el-button size="small" @click="toEdit(scope.row)">
            修改
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="changeStatus(scope.row)"
          >
            {{ scope.row.is_del == 0 ? '禁用' : '启用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-divider />

    <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[2, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 新增/修改对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="title" width="500">
      <el-form :model="employee">
        <el-form-item label="员工账号" >
          <el-input v-model="employee.account" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工昵称" >
          <el-input v-model="employee.nickname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工电话" >
          <el-input v-model="employee.telephone" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveOrEditEmployee">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import employeeApi from '@/api/employee.js'
import { ElMessage } from 'element-plus'
  export default {
    data () {
      return {
        employeeSearch: {},
        employeeList:[],
        currentPage:1,
        pageSize:2,
        total:0,
        employee:{},
        title:'新增员工',
        dialogFormVisible:false
      }
    },
    methods:{
      changeStatus(row){
        // 启用或禁用接口
        ElMessageBox.confirm(
          '您确定要改变该用户的状态吗?',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            employeeApi.updateEmployeeStatus({
              id:row.id,
              is_del:row.is_del == 0 ? 1 : 0
            }).then(res=>{
                ElMessage.success(res.msg);
                  // 重新查询
                  this.getEmployeePage();
              })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消改变用户状态的操作',
            })
          })
      
      },
      toEdit(row){
        // 修改标题
        this.title = '修改员工';
        this.dialogFormVisible = true;
        // 深拷贝,实现数据回显
        this.employee = JSON.parse(JSON.stringify(row));
      },
      openDialog(){
        // 修改标题
        this.title = '新增员工';
        this.dialogFormVisible = true;
        // 清除数据
        this.employee = {}
      },
      // 新增或修改员工信息
      saveOrEditEmployee(){
        if(this.title == '新增员工'){
          // 新增员工
          employeeApi.addEmployee(this.employee).then(res=>{
            ElMessage.success(res.msg);
              // 关闭对话框
              this.dialogFormVisible = false;
              // 重新查询
              this.getEmployeePage();
          })
        }else{
          // 修改员工
          employeeApi.editEmployee(this.employee).then(res=>{
            ElMessage.success(res.msg);
              // 关闭对话框
              this.dialogFormVisible = false;
              // 重新查询
              this.getEmployeePage();
          })
        }

       
      },
      handleSizeChange(val){
        this.pageSize = val;
        //重新发起分页查询
        this.getEmployeePage();
      },
      handleCurrentChange(val){
        this.page = val;
        //重新发起分页查询
        this.getEmployeePage();
      },
      getEmployeePage(){
        // 分页带条件查询
        const data = {
          page:this.currentPage,
          pageSize:this.pageSize,
          account:this.employeeSearch.account,
          nickname:this.employeeSearch.nickname,
          telephone:this.employeeSearch.telephone
        };
        // qs.Stringify(data)  转成  page=1&pageSize=5&account=&nickname=&telephone=
        employeeApi.getEmployeeList(data).then(res=>{
          // res.data 等价于后台返回的result={code,data,msg}
          this.employeeList = res.data.list;
          this.total = res.data.total;
        })
      }
      
    },
    created(){
      // 调用分页带条件查询方法
      this.getEmployeePage();
    }
  }
</script>

<style scoped>

</style>